;(function(window, $) {

    function Modal(opts) {
        var defaults = {}
        var configs = $.extend(true, defaults, opts || {})
        this.configs = configs
        this.$modal = {}
        this.container = configs.container              // 弹窗的外包裹元素
        this.content = configs.content                  // 弹窗的内容
        this.name = configs.name                        // 弹窗的 name
        this.onHide = configs.onHide                    // 隐藏回调
        this.onShow = configs.onShow                    // 显示回调
        this.onOK = configs.onOK                        // 确定按钮的回调
        this.init()
    }

    Modal.prototype = {
        constructor: Modal,
        init: function() {
            this.removeEvents()
            var wrapEle = createDoms(this.container, this.content, this.name)
            this.wrapEle = wrapEle
            if(this.onShow && typeof this.onShow === 'function'){
                this.onShow.call(this)
            }
            this.bindEvents(this, this.configs)
        },
        // 隐藏弹窗
        hideAlertWrap: function () {
            this.removeEvents()
            if(this.onHide) {
                this.onHide()
            }
            var wrapEle = $('#'+this.name+'AlertWrap')
            if(wrapEle) {
                wrapEle.hide()
            }
        },
        // 确定按钮回调函数
        handleConfirm: function () {
            if(this.onOK) {
                this.onOK()
            }
        },
        bindEvents: function(that, opts) {
            $('#'+this.name+'AlertWrap .btn-cancle-alert').on('click', $.proxy(this.hideAlertWrap, this))// 点击弹窗取消按钮和x按钮
            $('#'+this.name+'AlertWrap .alert-inner .close-alert').on('click', $.proxy(this.hideAlertWrap, this))// 点击弹窗取消按钮和x按钮
            $('#'+this.name+'AlertWrap .btn-confirm-alert').on('click', $.proxy(this.handleConfirm, this)) // 点击弹窗确定按钮
        },
        removeEvents: function() {
            $('#'+this.name+'AlertWrap .btn-cancle-alert').off('click', $.proxy(this.hideAlertWrap, this))// 点击弹窗取消按钮和x按钮
            $('#'+this.name+'AlertWrap .alert-inner .close-alert').off('click', $.proxy(this.hideAlertWrap, this))// 点击弹窗取消按钮和x按钮
            $('#'+this.name+'AlertWrap .btn-confirm-alert').off('click', $.proxy(this.handleConfirm, this)) // 点击弹窗确定按钮
        }
    }

    // 创建 dom
    function createDoms(container, content, name) {
        var htmls = [
            '<div class="alert-wrap"  id="'+name+'AlertWrap">',
            '<div class="alert-inner">',
            '<h3 class="alert-title">新建<span class="iconfont icon-x close-alert">X</span></h3>',
            '<div class="alert-content"></div>',
            '<div class="pop_oper">',
            '<button class="btn btn-info btn-confirm-alert">确定</button>',
            '<button class="btn btn-cancle-alert" style="margin-left: 20px;">取消</button>',
            '</div>',
            '</div>',
            '</div>'
        ]
        var exist = $(container).find('#'+name+'AlertWrap').length
        if(exist <= 0) {
            $(container).append(htmls.join(''))
        }
        var wrapEle = $('#'+name+'AlertWrap')
        wrapEle.find('.alert-content').html(content)
        wrapEle.show()
        return wrapEle
    }

    // 暴露
    window.Modal = Modal
})(window, jQuery)